<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input @keyup.enter.native="handleFilter" style="width: 260px;" class="filter-item"
                      placeholder="请输入查询信息" v-model="query.keyword">
            </el-input>
            <el-button class="filter-item" v-waves type="primary" icon="el-icon-search" @click="handleFilter">查询
            </el-button>
            <el-button class="filter-item" @click="showEditDialog(0)" style="margin-left: 0" type="primary"
                       icon="el-icon-edit"> 添加
            </el-button>
        </div>
        <template>
            <el-table
                :data="tableList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border fit
                highlight-current-row
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                    prop="name"
                    label="栏目名称"
                >
                </el-table-column>
                <el-table-column label="操作" width="200" align="left">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showAddDialog(scope.row)" type="info"
                                   icon="el-icon-circle-plus-outline"></el-button>
                        <el-button size="mini" @click="showEditDialog(scope.row.id)" type="success"
                                   icon="el-icon-edit-outline"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete"
                                   @click="handleDelete(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-dialog :stateManager="stateManager"></el-dialog>
    </div>
</template>
<script>
    import _dialog from './_dialog.vue'
    import waves from '@/directive/waves' // Waves directive
    export default {
        name: 'admin',
        components: {
            'el-dialog': _dialog
        },
        directives: {waves},
        data: function () {
            return {
                stateManager: {
                    refreshList: true,
                    editDialogVisible: false,
                    editModelId: null,
                    parentId: 0,
                    listLoading: true,
                    buttonLoading: false,
                },
                query: {
                    keyword: '',
                    page: 1
                },
                list: [],
                model: this.$modelDataSource({
                    url: '/api/cms/category',
                    dataKey: 'model',
                    attributes: {
                        id: '',
                    }
                }),
                currentPage: 1,
            }
        },
        created() {
            this.$store.commit('setPageTitle', '栏目管理')
        },
        methods: {
            showEditDialog: function (id) {
                this.stateManager.editDialogVisible = true
                this.stateManager.editModelId = id
            },
            showAddDialog(data) {
                this.stateManager.parentId = data.id
                this.stateManager.editDialogVisible = true
                this.stateManager.editModelId = 0
            },
            fetchList(params, callback) {
                axios.get('/api/cms/category', {params: params}).then((res) => {
                    callback(res)
                })
            },
            handleFilter() {
                this.query.page = 1
                this.stateManager.refreshList = true
            },
            // 翻页
            handleCurrentChange(val) {
                this.currentPage = val
                this.query.page = val
                this.stateManager.refreshList = true
            },
            handleDelete(id) {
                let self = this
                this.$confirm('是否删除此项？', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                    title: '删除确认'
                }).then(() => {
                    self.model.uuid = id
                    self.model.destroy(function () {
                        self.stateManager.refreshList = true
                        self.$message.success('删除成功')
                    })
                }).catch((res) => {
                    console.log(res.response)

                })
            },
        },
        computed: {
            tableList() {
                let self = this
                if (this.stateManager.refreshList) {
                    this.stateManager.listLoading = true
                    this.fetchList(self.query, (res) => {
                        this.list = res.data
                        this.stateManager.refreshList = false
                    })
                }
                return this.list
            }
        }
    }
</script>
<style lang="scss" scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8%;
    }

    .select {
        font-siz: 20px;
        color: #1e90ff;
    }

    .custom-tree-node {
        padding-right: 0;
    }
</style>
